import React from 'react';
import { Input, Select, Form, Checkbox, DatePicker, Cascader, Button, Radio, TreeSelect, Drawer, Col, InputNumber, Switch } from 'antd';
import * as Utils from '../../utils_yyr/action';

// drawer 新增修改抽屉 type：控件的类型 label:标签名  list:下拉框的值 name：下拉框显示的字段 field:Form表单的key 对应查询接口的参数名
// valueField:下拉框取值的字段 required:代表是否必填 col: 单个控件显示的长度 默认为6  showTime:日期控件是否显示时分秒
// initialValue:初始化表单的值 日期范围控件命名方式: frame_开始时间参数_结束时间参数  单个日期控件命名方式 :date_sendDate
// import config from "../../config";

const { TextArea } = Input;
const { RangePicker, MonthPicker } = DatePicker;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;

class BasicModal extends React.Component {
	state = {
		showIcon: true,
		fileList: [],
		cityList: []
	};

	componentDidMount() {
		this.props.onRef(this);
	}

	reset = () => {
		const p = this;
		p.props.form.resetFields();
	};

	handleAdd = () => {
		const p = this;
		p.props.handleOpenModal('add');
	};

	pitchDelete = () => {
		const p = this;
		p.props.pitchDelete();
	};

	onChange = () => {};

	onTreeChange = () => {};

	initFormList = () => {
		const p = this;
		const { getFieldDecorator } = p.props.form;
		const { drawerFormList, detail } = this.props;

		const formItemList = [];
		if (drawerFormList && drawerFormList.length > 0) {
			drawerFormList.forEach(item => {
				const { label } = item;
				const { field } = item;
				const { tree } = item;
				const { rules } = item;
				const { dom } = item;
				const { required, parent } = item;
				const rulesType = required ? [{ required: true, message: `${label}必填` }] : false;
				const initialValue = item.initialValue || undefined;
				const frame = [];
				let showAdd = false;
				// if(initialValue&&initialValue instanceof Array){
				//     if(initialValue.length===1&&this.state.fileList&&this.state.fileList.length===0&&!this.state.showIcon)showAdd=true
				//     if(initialValue.length===0&&this.state.fileList&&this.state.fileList.length===0)showAdd=true
				// }

				//时间范围选择器
				if (initialValue && initialValue instanceof Array) {
					initialValue.map(item => {
						frame.push(Utils.getDateByString(item));
					});
				}

				const { placeholder } = item;

				const { style } = item;
				const { name, valueField, showTime } = item;
				const { disabled } = item;
				const formItemLayout = {
					labelAlign: 'left',
					labelCol: {
						xs: { span: 24 },
						sm: { span: 6 }
					},
					wrapperCol: {
						xs: { span: 24 },
						sm: { span: 16 }
					}
				};
				if (item.type === 'TIMEFRAME') {
					const timeFrame = (
						<FormItem label={label} key={field} {...formItemLayout}>
							{getFieldDecorator(`${field}`, {
								initialValue: frame
							})(<RangePicker style={{ width: '100%' }} showTime={showTime ? true : false} placeholder="起始日期" format={showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'} />)}
							{dom}
						</FormItem>
					);
					formItemList.push(timeFrame);
				} else if (item.type === 'DATE') {
					const date = (
						<FormItem label={label} key={field} {...formItemLayout}>
							{getFieldDecorator(`${field}`, {
								initialValue: Utils.getDateByString(initialValue)
							})(<DatePicker style={{ width: '100%' }} showTime={showTime ? true : false} format={showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'} />)}
						</FormItem>
					);
					formItemList.push(date);
				} else if (item.type === 'INPUT') {
					const INPUT = (
						<FormItem label={label} key={field} {...formItemLayout}>
							{getFieldDecorator(`${field}`, {
								rules: rulesType,
								initialValue
							})(<Input type="text" placeholder={placeholder ? placeholder : `请输入${label}`} style={style} allowClear/>)}
							{dom}
						</FormItem>
					);
					formItemList.push(INPUT);
				} else if (item.type === 'INPUTNUMBER') {
					const inputNumber = (
						<FormItem label={label} key={field} {...formItemLayout}>
							{getFieldDecorator(`${field}`, {
								rules: rulesType,
								initialValue
							})(<InputNumber style={{ width: '100%' }} />)}
						</FormItem>
					);
					formItemList.push(inputNumber);
				} else if (item.type === 'SWITCH') {
					const switch1 = (
						<FormItem label={label} key={field} {...formItemLayout}>
							{getFieldDecorator(`${field}`, {
								rules: rulesType,
								initialValue,
								valuePropName: 'checked'
							})(<Switch />)}
						</FormItem>
					);
					formItemList.push(switch1);
				} else if (item.type === 'NUMBERFRAME') {
					let arr = field.split('_');
					const number = (
						<Col span={24}>
							<Col span={12}>
								<FormItem label={label} key={field}>
									{getFieldDecorator(`${arr[1]}`)(<InputNumber style={{ width: '100%' }} placeholder="最高数量" />)}
								</FormItem>
							</Col>
							<Col span={12}>
								<FormItem key={field}>{getFieldDecorator(`${arr[2]}`)(<InputNumber style={{ width: '100%' }} placeholder="最低数量" max={p.props.form.getFieldValue(arr[1]) ? p.props.form.getFieldValue(arr[1]) : Infinity} />)}</FormItem>
							</Col>
						</Col>
					);
					formItemList.push(number);
				} else if (item.type === 'MONTHDATE') {
					const month = (
						<FormItem label={label} key={field} style={style} {...formItemLayout}>
							{getFieldDecorator(`${field}`, {
								rules: rulesType,
								initialValue
							})(<MonthPicker placeholder={`请选择${label}`} style={{ width: '100%' }} showTime={showTime ? true : false} />)}
						</FormItem>
					);
					formItemList.push(month);
				} else if (item.type === 'TEXTAREA') {
					const TEXTAREA = (
						<FormItem label={label} key={field} style={style} {...formItemLayout}>
							{getFieldDecorator(`${field}`, {
								rules: rulesType,
								initialValue
							})(<TextArea autosize={{ minRows: 5 }} />)}
							{dom}
						</FormItem>
					);
					formItemList.push(TEXTAREA);
				} else if (item.type === 'SELECT') {
					const SELECT = (
						<FormItem label={label} key={field} {...formItemLayout}>
							{getFieldDecorator(`${field}`, {
								initialValue, // true | false
								rules: rulesType
							})(
								<Select placeholder={'请选择' + label} onChange={parent ? value => p.props.parentChange(value) : ''} showSearch allowClear filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
									{Utils.getOptionList(item.list, name, valueField)}
								</Select>
							)}
						</FormItem>
					);
					formItemList.push(SELECT);
				} else if (item.type === 'TREESELECT') {
					const REDIO = (
						<FormItem label={label} key={field} {...formItemLayout}>
							{getFieldDecorator(`${field}`, {
								rules: rulesType,
								initialValue
							})(<TreeSelect onChange={this.onTreeChange} treeData={tree} placeholder={placeholder} showCheckedStrategy="SHOW_PARENT" searchPlaceholder={initialValue} treeCheckable showCheckedStrategy="SHOW_PARENT" searchPlaceholder="Please select" />)}
						</FormItem>
					);
					formItemList.push(REDIO);
				} else if (item.type === 'RADIO') {
					const REDIO = (
						<FormItem label={label} key={field} {...formItemLayout}>
							{getFieldDecorator(`${field}`, {
								rules:rulesType,
								initialValue: initialValue || 0
							})(
								<RadioGroup onChange={this.onChange} placeholder={placeholder}>
									{Utils.getRadioList(item.list, name)}
								</RadioGroup>
							)}
						</FormItem>
					);
					formItemList.push(REDIO);
				} else if (item.type === 'CHECKBOX') {
					const CHECKBOX = (
						<FormItem label={label} key={field} {...formItemLayout}>
							{getFieldDecorator(`${field}`, {
								rules: rulesType,
								// valuePropName: 'checked',
								initialValue // true | false
							})(<CheckboxGroup>{Utils.getCheckboxList(item.list)}</CheckboxGroup>)}
						</FormItem>
					);
					formItemList.push(CHECKBOX);
				} else if (item.type === 'CASCADER') {
					const CASCADER = (
						<FormItem label={label} key={field} {...formItemLayout}>
							{getFieldDecorator(`${field}`, {
								initialValue // true | false
							})(<Cascader placeholder={placeholder} allowClear options={tree} expandTrigger="hover" />)}
						</FormItem>
					);
					formItemList.push(CASCADER);
				} else if (item.type === 'CHECKBOXALONE') {
					const CHECKBOX = (
					  <FormItem label={label} key={field} {...formItemLayout}>
						{getFieldDecorator(`${field}`, {
						//   valuePropName: 'checked',
						  initialValue, // true | false
						})(<Checkbox>{label}</Checkbox>)}
					  </FormItem>
					);
					formItemList.push(CHECKBOX);
				  } 
			});
		}
		return formItemList;
	};

	closeModal = () => {
		const p = this;
		const { onClose } = p.props;
		// form.resetFields();
		onClose();
	};

	handleSubmit = () => {
		const p = this;
		const { form } = this.props;
		form.validateFieldsAndScroll((err, fieldsValue) => {
			if (err) {
				return;
			}
			for (var key in fieldsValue) {
				//时间范围选择器
				if (key.indexOf('frame_') === 0) {
					if (fieldsValue[key] && fieldsValue[key].length) {
						let arr = key.split('_');
						fieldsValue[arr[1]] = Utils.getDate(fieldsValue[key][0]);
						fieldsValue[arr[2]] = Utils.getDate(fieldsValue[key][1]);
					}
					delete fieldsValue[key];
				}
				//单个时间选择器
				if (key.indexOf('date_') === 0) {
					if (fieldsValue[key]) {
						let arr = key.split('_');
						fieldsValue[arr[1]] = Utils.getDate(fieldsValue[key]);
					}
					delete fieldsValue[key];
				}

				//月选择器
				if (key.indexOf('month_') === 0) {
					if (fieldsValue[key]) {
						let arr = key.split('_');
						fieldsValue[arr[1]] = Utils.getStringByDate(fieldsValue[key], 'YYYY-MM');
					}
					delete fieldsValue[key];
				}
			}
			p.props.submit(fieldsValue);
		});
	};

	render() {
		const p = this;
		const { visible, title, detail, width } = this.props;
		const modalProps = {
			title,
			visible,
			width,
			onClose() {
				p.closeModal();
			}
		};

		return (
			<Drawer {...modalProps}>
				<Form layout="horizontal">{p.initFormList()}</Form>
				<div style={{ position: 'absolute', right: 0, bottom: 0, width: '100%', borderTop: '1px solid #e9e9e9', padding: '10px 16px', background: '#fff', textAlign: 'right' }}>
					<Button type="primary" onClick={this.handleSubmit} style={{ marginRight: 8 }}>
						保存
					</Button>
					<Button onClick={() => p.closeModal()} style={{ marginRight: 8 }}>
						关闭
					</Button>
				</div>
			</Drawer>
		);
	}
}
export default Form.create({})(BasicModal);
